<template>
	<view class="item-style" :style="borderStyle">
		<view class="input-type">{{typeMsg}}</view>
		<input style="width: 400rpx;height: 100rpx;" @input="setInputValue"
			:placeholder="emptyMsg"/>
	</view>
</template>

<script>
	/**
	 * author: 陈炎
	 * description: 用于显示输入框
	 * typeMsg表示输入框名称
	 * isLast表示是否为最后一项，用于防止相邻输入框上下边框重叠过粗
	 * 		isLast为true时，显示下边框
	 * 		isLast为false时，不显示下边框
	 * isEmpty表示输入框内容是否可选
	 * 		isEmpty为true时，输入框占位显示选填
	 * 		isEmpty为false时，输入框占位显示请输入+输入框名称
	 * setInputValue方法获取输入框的值并传值，父组件通过@getValue获取输入框的值
	 */
	export default{
		props: {
			typeMsg: {
				type: String,
				default: ''
			},
			isLast: {
				type: Boolean,
				default:false
			},
			isEmpty: {
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				borderStyle: this.isLast?'border-bottom: solid 1rpx #C0C0C0;':'',
				inputValue:'',
				emptyMsg: this.isEmpty ? '选填' : '请输入' + this.typeMsg
			}
		},
		methods: {
			setInputValue(e) {
				this.inputValue = e.detail.value
				this.$emit('getValue',this.inputValue)
			}
		},
	}
</script>

<style>
	.input-type{
		display: flex;
		flex-direction: column;
		margin-left: 50rpx;
		justify-content: center;
		height: 100rpx;
		width: 200rpx;
	}
	.item-style{
		display: flex;
		background-color: #FFFFFF;
		border: solid 1rpx #C0C0C0;
		border-bottom: 0;
	}
</style>
